<template>
    <div class="layout">
        <Layout :style="{height:'100vh'}">
            <Sider breakpoint="md" :collapsed-width="78" v-model="isCollapsed" :style="{zIndex:'999'}">
                <div class="logo-img">
                    <a href="/console.html#/index/index"><img src="/statics/console/logo.png" alt=""></a>
                </div>
                <Menu ref="side_menu" width="auto" :class="menuitemClasses" accordion :active-name="activeName" :open-names="[openNames]">
                    <!-- 一级分类 -->
                    <div :name="one.url" theme="light" v-for="one in menuData" :key="one.id">
                        <div class="left_one">
                            <Icon type="ios-more" />
                            {{ one.name }}
                        </div>
                        <!-- 二级分类 -->
                        <Submenu :name="two.url" theme="light" v-for="two in one.submenu" :key="two.id">
                            <template #title>
                                <Icon :type="two.icon" />
                                {{ two.name }}
                            </template>
                            <!-- 三级分类 -->
                            <MenuItem :name="there.url" v-for="there in two.there" :key="there.id" :to="'/' + there.url">{{ there.name }}
                                <Icon type="ios-arrow-round-forward" :style="{float: 'left'}" />
                            </MenuItem>
                        </Submenu>
                    </div>
                </Menu>
                <!-- 退出 -->
                <!-- <div class="left_two" @click="handleDropDownClick('logout')">
                  <Icon type="ios-arrow-dropright" style="margin-right:10px" />退出登录
                </div> -->
            </Sider>
            <Layout>
                <Header class="layout-header-bar">
                    <Breadcrumb separator=">" class="f-l">
                        <BreadcrumbItem v-for="item in breadCrumbList" to="" :key="item.id">{{ item.name }}</BreadcrumbItem>
                    </Breadcrumb>
                <div class="header-right">
                  <Avatar src="/statics/console/header.jpg" />
                  <Dropdown trigger="click">
                    <a href="javascript:void(0)">
                      <span class="header-nickname">{{ username }}</span>
                      <Icon type="ios-arrow-down" style="margin-left:5px"></Icon>
                    </a>
                    <template #list>
                      <DropdownMenu>
                        <DropdownItem @click="editInfo()">个人信息</DropdownItem>
                        <DropdownItem @click="editPwd()">修改密码</DropdownItem>
                        <DropdownItem @click="logout('logout')">退出登录</DropdownItem>
                      </DropdownMenu>
                    </template>
                  </Dropdown>
                </div>
                    </Header>
                <!-- 标题 + 按钮组 -->
                <div class="right_top_bg clearfix">
                    <div class="right_top clearfix">
                        <h4 class="f-l right-titles">{{ title }}</h4>
                    </div>
                </div>
                <Content :style="{ padding:'15px', background: '#fff'}">
                    <router-view></router-view>
                </Content>
                <Footer class="layout-footer-center">2022-2099 &copy; 萤火科技 189-3281-3211</Footer>
            </Layout>
        </Layout>
    </div>
    </template>
    <script>
    import router from '.././router/router'
    import { LOGOUT } from '.././store/mutation_types'
    export default {
      data() {
        return {
          openNames:'',
          activeName:'',
          isCollapsed: false, // 侧栏开关
          menuData: [], // 左侧菜单
          breadCrumbList: [], // 面包屑
          title: '首页', // 标题
        };
      },
      computed: {
        // 登录状态
        username() {
          return this.$store.getters.user_id != 0 ? this.$store.getters.user_name : '未登录'
        },
        menuitemClasses: function() {
          return [
            'menu-item',
            this.isCollapsed ? 'collapsed-menu' : ''
          ]
        }
      },
      watch: {
          openNames() {
              this.$nextTick(() => {
                  this.$refs.side_menu.updateOpened();
                  this.$refs.side_menu.updateActiveName();
              })
          }
      },
      created: function() {
        this.getMenuData();
        // 初始化面包屑及标题+按钮组
            var params = { 'url': this.$route.path };
            this.$api.common.breadcrumb(params).then(res => {
                this.breadCrumbList = res.result;
            });
            // 路由结束后更新面包屑及标题+按钮组
            router.afterEach((to, from) => {
                var params = { 'url': to.path };
                // 这里是个大坑，不判断登录页面会在退出时让登录页面进入死循环，全局的钩子还是要少加为好
                if (to.name !== 'login') {
                    this.$api.common.breadcrumb(params).then(res => {
                        this.breadCrumbList = res.result;
                    });
                }
            })
      },
      methods: {
        logout(name) {
                if (name == 'logout') {
                    this.$store.commit(LOGOUT)
                    // 跳转到登录
                    router.push('/');
                }
            },
            editInfo(){
                router.push('/admin/selfinfo');
            },
            editPwd(){
                router.push('/admin/selfpassword');
            },
        getMenuData: function() {
          var self = this
          this.$api.menu.left().then(res => {
            self.menuData = res.result
            // 在这里更新要打开的左侧菜单
            let objTmp = res.result;
            let arr1 = [];
            Object.keys(objTmp).forEach(v => {
                let tmp = {'id':objTmp[v].id,'parentid':objTmp[v].parent_id,'label':objTmp[v].url};
                arr1.push(tmp);
                let objTmpSub = objTmp[v].submenu;
                // 子菜单
                Object.keys(objTmpSub).forEach(s => {
                    let tmp = {'id':objTmpSub[s].id,'parentid':objTmpSub[s].parent_id,'label':objTmpSub[s].url};
                    arr1.push(tmp);
                    // 第三层
                    let objTmpThere = objTmpSub[s].there;
                    Object.keys(objTmpThere).forEach(t => {
                      let tmp = {'id':objTmpThere[t].id,'parentid':objTmpThere[t].parent_id,'label':objTmpThere[t].url};
                      arr1.push(tmp);
                  })
                })
            });
            let tmppath = this.$route.path;
            // .replace('/','-')
            tmppath = tmppath.substr(1);
            let obj = arr1.find(o => o.label == tmppath);
            if (obj != undefined) {
                let obj2 = arr1.find(o => o.id == obj.parentid);
                this.openNames = obj2.label;
                this.activeName = obj.label;
            }
          });
        }
      }
    }
    </script>
    